﻿<template>
  <div>
    <!--查询参数-->
    <params
      ref="params"
      @handleRefresh="handleRefresh"
      :loading="loading"
    ></params>
    <!--表格页面-->
    <my-table
      ref="myTable"
      title="用户列表"
      :columns="columns"
      :loading="loading"
      :dataSource="dataSource"
      @loadData="loadData"
      @handleAdd="handleAdd"
      @handleEdit="handleEdit"
      @handleImport="handleImport"
      @handleExport="handleExport"
      @handleDetail="handleDetail"
      @removeSubmit="removeSubmit"
      addAction="user_create"
      deleteAction="user_delete"
      editAction="user_edit"
      detailAction="user_details"
    >
      <template slot="salesLink" slot-scope="{ text }">
        <a
          v-if="text.record.salesLink"
          target="_blank"
          :href="localhostPath + '?p=' + text.record.salesLink"
          >跳转分销页面</a
        >
        <span v-else>{{ text.record.name }}</span>
      </template>

      <template slot="wxQrCode" slot-scope="{ text }">
        <img
          @click="showImg(text.record.wxQrCode)"
          v-if="text.record.wxQrCode"
          width="50"
          style="cursor: pointer"
          height="50"
          :src="text.record.wxQrCode"
        />
      </template>

      <template v-slot:buttons="{ item }">
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleResetPwd(item.id)">
                <a-icon type="reload" />重置密码
              </a>
            </a-menu-item>
            <a-menu-item>
              <a v-if="item.status" @click="handleChangeStatus(item.id, false)">
                <a-icon type="close-circle" />禁用
              </a>
              <a v-else @click="handleChangeStatus(item.id, true)">
                <a-icon type="check-circle" />启用
              </a>
            </a-menu-item>
          </a-menu>
          <a>
            <a-icon type="more" />
            更多
            <a-icon type="down" />
          </a>
        </a-dropdown>
      </template>
    </my-table>

    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="handleClosePreview"
    >
      <img alt="收款二维码" style="width: 100%" :src="previewImg" />
    </a-modal>
    <!--修改页面-->
    <modify
      v-if="modifyEntity.showModify"
      @handleRefresh="handleRefresh"
      :modifyEntity="modifyEntity"
    />
    <detail
      v-if="modifyEntity.showDetail"
      @handleRefresh="handleRefresh"
      :modifyEntity="modifyEntity"
    />
  </div>
</template>
<script>
import modify from "./modify";
import detail from "./detail";
import myTable from "_c/myTable/index";
import params from "./components/params";
import {
  userColumns,
  queryUserPage,
  deleteUser,
  changeStatus,
  resetPwd,
} from "./user";

export default {
  name: "User",
  components: { params, modify, detail, myTable },
  data() {
    return {
      modifyEntity: {
        // 传递的主键
        id: "",
        // 页面操作类型
        operation: "",
        // 是否展示编辑页面
        showModify: false,
        // 是否展示详情页面
        showDetail: false,
      },
      // 加载动画
      loading: false,
      // 绑定的数据源
      dataSource: [],
      // 表格绑定的列
      columns: userColumns,
      previewVisible: false,
      previewImg: "",
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    //#region 查看图片
    showImg(img) {
      this.previewImg = img;
      this.previewVisible = true;
    },
    handleClosePreview() {
      this.previewImg = "";
      this.previewVisible = false;
    },
    //#endregion

    //#region 查询列表
    // 保存/修改后刷新表格
    handleRefresh() {
      this.modifyEntity.showDetail = false;
      this.modifyEntity.showModify = false;
      this.$refs.myTable.pagination.current = 1;
      this.loadData();
    },
    // 加载数据
    loadData() {
      this.loading = true;
      let that = this;
      let queryParams = {
        ...this.$refs.params.params,
        current: this.$refs.myTable.pagination.current,
        pageSize: this.$refs.myTable.pagination.pageSize,
      };
      queryUserPage(queryParams)
        .then((res) => {
          let { data, totalCount } = res.data;
          that.dataSource = data;
          this.$refs.myTable.pagination.total = totalCount;
          that.loading = false;
        })
        .catch(() => {
          that.loading = false;
        });
    },
    //#endregion

    //#region 添加
    // 打开添加页面
    handleAdd() {
      this.modifyEntity = {
        showModify: true,
        showDetail: false,
        operation: this.operationFlag.Add,
      };
    },
    //#endregion

    //#region 删除
    // 删除
    removeSubmit(ids) {
      deleteUser(ids).then((res) => {
        if (res.code == 200) {
          this.$notification.success({ description: res.msg });
          this.handleRefresh();
        } else {
          this.$notification.error({ description: res.msg });
        }
      });
    },
    //#endregion

    //#region 修改
    // 打开编辑页面
    handleEdit(item) {
      this.modifyEntity = {
        id: item.id,
        showModify: true,
        showDetail: false,
        operation: this.operationFlag.Edit,
      };
    },
    //#endregion

    //#region 详情
    // 打开详情页面
    handleDetail(item) {
      this.modifyEntity = {
        id: item.id,
        showDetail: true,
        showModify: false,
        operation: this.operationFlag.Detail,
      };
    },
    //#endregion
    //#region 启用/禁用
    handleChangeStatus(id, status) {
      var that = this;
      this.$confirm({
        title: `确定要${status ? "启动" : "禁用"}吗?`,
        onOk() {
          changeStatus({ id, status }).then((res) => {
            if (res.code == 200) {
              that.$notification.success({ description: res.msg });
              that.handleRefresh();
            } else {
              that.$notification.error({ description: res.msg });
            }
          });
        },
        onCancel() {},
      });
    },
    //#endregion

    //#region 启用/禁用
    handleResetPwd(id) {
      var that = this;
      this.$confirm({
        title: `确定要重置密码为123456吗?`,
        onOk() {
          resetPwd({ id: id }).then((res) => {
            if (res.code == 200) {
              that.$notification.success({ description: res.msg });
              that.handleRefresh();
            } else {
              that.$notification.error({ description: res.msg });
            }
          });
        },
        onCancel() {},
      });
    },
    //#endregion

    //#region 导入
    // 导入数据
    handleImport() {},
    //#endregion

    //#region 导出
    // 导出数据
    handleExport() {},
    //#endregion
  },
};
</script>
